<script setup>

</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">

      <el-form-item label="物业名称" prop="pmid">
        <el-select v-model="queryParams.pmid" placeholder="请选择物业名称" @change="clearCarshomeList"
                   clearable>
          <el-option
            v-for="item in this.propertyList"
            :key="item.pmid"
            :label="item.propertyName"
            :value="item.pmid">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="车场名称" prop="chid">
        <el-select v-model="queryParams.chid" placeholder="请选择车场名称" @visible-change="getListCars" clearable>
          <el-option
            v-for="item in this.carshomeList"
            :key="item.chid"
            :label="item.chname"
            :value="item.chid">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="showQRCode"
      width="30%"
    >
      <!-- 存放二维码的区域 -->
      <div class="sg-qrcode">
        <vue-qr
          :text="code_url"
          :correctLevel="3"
          :size="250"
          :margin="10"
          colorDark="green"
          colorLight="white"
          backgroundColor="white"
          backgroundDimming="white"
          :logoScale="0.2"
          :logoMargin="5"
          logoBackgroundColor="black"
        ></vue-qr>
        <h2>请扫一扫这个二维码</h2>
      </div>
    </el-dialog>



  </div>
</template>
<script>
import {listHome} from "@/api/modules/sys-cars-home/home";
import {listProperty} from "@/api/modules/sys-property/property";

export default {
  name: "wuliao",
  data() {
    return {
      // 查询参数
      queryParams: {
        pmid: null,
        chid: null
      },
      queryParams2: {

        pmid: null,
        chid: null

      },

      // 车场管理表格数据
      carshomeList: [],
      // carshomeList2: [],

      // 物业数据
      propertyList: [],

      showQRCode:false,
      code_url:"http://172.16.3.98/carshome/billing",
      paystatus:"",
      timer1:"",
      order:{
        money:0.01,
        orderNum:"",
        describe:"雨雨雨雨",
      }
    };

  },

  created() {
    this.getListCars()
    this.getListProperty()
  },

  methods: {
    /** 查询车场管理列表 */
    getListCars() {
      this.queryParams2.pmid = this.queryParams.pmid
      listHome(this.queryParams2).then(response => {
        this.carshomeList = response.rows;
      });

    },

    /** 查询物业列表 */
    getListProperty() {
      this.loading = true;
      listProperty(null).then(response => {
        this.propertyList = response.rows;
        console.log(this.propertyList)
        this.loading = false;
      });
    },

    //清除车场
    clearCarshomeList() {
      this.queryParams2.pmid = this.queryParams.pmid
      this.queryParams.chid = null
      this.getListCars()
    },

    /** 搜索按钮操作 */
    handleQuery() {
      // this.getList();
      this.showQRCode=true;
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.queryParams.pmid=null
      this.queryParams.chid=null
      this.handleQuery();
    },

  },

}


</script>
<style scoped lang="scss">

</style>
